<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/20
  Time: 14:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>增加一个用户</title>
    <link type="text/css" rel="stylesheet" href="/layui/css/layui.css"/>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        layui.use('form',function () {
            var form=layui.form;

            //监听增加用户表单中的submitbutton
            form.on('submit(addUserFilter)',function (data) {
                //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
               // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
               // console.log(data.field.name+","+data.field.addr) //当前容器的全部表单字段，名值对形式：{name: value}

                //1.这个表单元素中的值  data.field.name
                $.ajax({
                    type:"post",//请求的方法  //post
                    url:"/user/save", //那服务组件来处理本次请求  data:提交的数据
                    //data: "name="+data.field.name+"&pwd="+data.field.pwd+"&age="+data.field.age+"&addr="+data.field.addr,
                    //data:$("#addUserForm").serialize(),//将这个表单中元素自动转换成上面的格式
                    data:data.field,
                    success:function (resp) {//回调方法,服务器成功返回数据，这个方法就执行
                        console.info(resp);
                    },
                    error:function () {
                        console.info("出错了")
                    }
                });

                //2.提交给后台
                return false;//这个表单不提交不发http 请求
            });

        })
    </script>
</head>
<body>
<div class="layui-container">
    <h2>增加一个用户</h2>
    <form class="layui-form" id="addUserForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
             </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="addr" placeholder="请输入地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUserFilter">立即提交</button>

                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
</body>
</html>
